<template>
  <div class="my-box-page">
    <!-- Header -->
    <div class="box-header">
      <button class="back-button" @click="goHome">
        <span class="back-icon">←</span>
      </button>
      <h1 class="header-title">我的宝可梦箱</h1>
    </div>

    <!-- Main Content -->
    <div class="box-main">
      <!-- Left: Pokémon Grid -->
      <div class="box-left">
        <div v-if="currentPokemon.length === 0" class="empty-box">
          <div class="info-icon">i</div>
          <p>当前页面没有宝可梦</p>
        </div>
        <div v-else class="pokemon-grid">
          <div
              v-for="pokemon in currentPokemon"
              :key="pokemon.id"
              class="pokemon-card"
              :class="{ selected: selectedPokemon?.id === pokemon.id }"
              @click="selectPokemon(pokemon)"
          >
            <div class="pokemon-card-content">
              <img
                  :src="`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png`"
                  :alt="pokemon.name"
                  class="pokemon-thumbnail"
              />
              <h3 class="pokemon-card-name">{{ pokemon.name }}</h3>
              <div class="type-badges">
                <span
                    v-for="(type, index) in pokemon.type.split('/')"
                    :key="index"
                    class="type-badge"
                    :style="{ backgroundColor: getTypeColor(type) }"
                >
                  {{ type }}
                </span>
              </div>
              <p class="pokemon-level">Lv. {{ pokemon.level }}</p>
            </div>
          </div>
        </div>
        <!-- Pagination -->
        <div class="pagination">
          <button
              class="page-button"
              :disabled="currentPage === 1"
              @click="currentPage--"
          >
            上一页
          </button>
          <span class="page-info">第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
          <button
              class="page-button"
              :disabled="currentPage === totalPages"
              @click="currentPage++"
          >
            下一页
          </button>
        </div>
      </div>

      <!-- Right: Pokémon Details -->
      <div class="box-right">
        <div v-if="!selectedPokemon" class="no-selection">
          <p>选择一个宝可梦查看详情</p>
        </div>
        <PokemonCard
            v-else
            :pokemon="selectedPokemon"
            :type-color-map="typeColorMap"
            :grid-columns="1"
        />
      </div>
    </div>

    <!-- Footer -->
    <div class="box-footer">
      <button class="return-button" @click="goHome">返回主页</button>
    </div>
  </div>
</template>

<script setup>
import { ref, inject, computed } from 'vue';
import PokemonCard from './PokemonCard.vue';

const navigate = inject('navigate');
const boxPokemon = inject('boxPokemon');
const selectedPokemon = ref(null);
const currentPage = ref(1);
const itemsPerPage = 25;

// Compute the total number of pages
const totalPages = computed(() => Math.ceil(boxPokemon.value.length / itemsPerPage));

// Compute the Pokémon to display on the current page
const currentPokemon = computed(() => {
  const start = (currentPage.value - 1) * itemsPerPage;
  const end = start + itemsPerPage;
  return boxPokemon.value.slice(start, end);
});

const goHome = () => {
  navigate('home');
};

const selectPokemon = (pokemon) => {
  selectedPokemon.value = pokemon;
};

// 类型映射表：中文到颜色
const typeColorMap = {
  一般: '#A8A878',
  火: '#F08030',
  水: '#6890F0',
  草: '#78C850',
  电: '#F8D030',
  冰: '#98D8D8',
  格斗: '#C03028',
  毒: '#A040A0',
  地面: '#E0C068',
  飞行: '#A890F0',
  超能力: '#F85888',
  虫: '#A8B820',
  岩石: '#B8A038',
  幽灵: '#705898',
  龙: '#7038F8',
  恶: '#705848',
  钢: '#B8B8D0',
  妖精: '#EE99AC'
};

const getTypeColor = (type) => {
  return typeColorMap[type] || '#9e9e9e';
};
</script>

<style scoped>
.my-box-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.box-header {
  background-color: #333;
  color: white;
  padding: 16px;
  display: flex;
  align-items: center;
}

.back-button {
  background: none;
  color: white;
  margin-right: 16px;
  padding: 8px;
}

.back-icon {
  font-size: 24px;
}

.header-title {
  font-size: 20px;
  font-weight: bold;
}

.box-main {
  flex: 1;
  display: flex;
  padding: 16px;
  gap: 16px;
}

.box-left {
  flex: 1;
  background-color: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.pokemon-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 8px;
  flex: 1;
}

.pokemon-card {
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s;
  overflow: hidden;
}

.pokemon-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.pokemon-card.selected {
  border: 2px solid #3498db;
}

.pokemon-card-content {
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pokemon-thumbnail {
  width: 64px;
  height: 64px;
}

.pokemon-card-name {
  font-weight: 500;
  text-align: center;
  font-size: 14px;
  margin: 4px 0;
}

.type-badges {
  display: flex;
  gap: 4px;
  margin-top: 2px;
}

.type-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 12px;
  color: white;
}

.pokemon-level {
  font-size: 10px;
  color: #666;
  margin-top: 2px;
}

.empty-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
}

.info-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 8px;
  opacity: 0.5;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
}

.page-button {
  background-color: #3498db;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
}

.page-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.page-button:hover:not(:disabled) {
  background-color: #2980b9;
}

.page-info {
  font-size: 14px;
  color: #666;
}

.box-right {
  flex: 1;
  background-color: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.no-selection {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}

.box-footer {
  background-color: #333;
  padding: 16px;
}

.return-button {
  width: 100%;
  background-color: #3498db;
  color: white;
  padding: 12px;
  font-size: 16px;
}

.return-button:hover {
  background-color: #2980b9;
}

@media (max-width: 800px) {
  .box-main {
    flex-direction: column;
  }

  .box-left, .box-right {
    flex: none;
    height: 50vh;
  }
}
</style>